<template>
    <header>
       <div class="header-center flex">
           <div class="header-title">
               孤寂无情个人博客
           </div>
           <div class="list">
               <ul>
                   <li><router-link to="/" :class="[$route.path==='/'?'active':'']">主页</router-link></li>
                   <li><router-link to="/note" :class="[$route.path==='/note'?'active':'']">笔记</router-link></li>
                   <li><router-link to="/" :class="[$route.path==='/1111'?'active':'']">web前端</router-link></li>
                   <li><router-link to="/message" :class="[$route.path==='/message'?'active':'']">留言板</router-link></li>
                   <li><router-link to="/about" :class="[$route.path==='/about'?'active':'']">关于</router-link></li>
                   <li><router-link to="/resume" :class="[$route.path==='/resume'?'active':'']">个人简历</router-link></li>
               </ul>
           </div>
       </div>
    </header>
</template>

<script>
    export default {
        name: "Header",
        data(){
            return{

            }
        }
    }
</script>

<style lang="stylus" scoped>
  header
      width 100%
      height 100px
      background-color #896759
      font-size 18px
      line-height 100px
      color #fff
  .header-center
      width 1200px
      margin 0 auto
  .header-title
      width: 400px
      text-align center
  .list
      ul li a
        padding:20px
        color #fff
  .active
      color red!important
      border-bottom 2px solid red

</style>
